<!-- 订单信息页 -->
<template>
	<div class="container">
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="订单信息" rightTextColor="#1959F9" @confirm="search" @cancel="cancel" :backgroundColor="bgColor"
			:inputValue="queryParam.Keyword" placeholder="请输入客户名称" :isBack="false" :isSearch="true" />
		<!-- <div style="position: fixed;width: 100%;top: 0;background: #fff;">
			<div style="margin-top: 50px;">
				<uni-search-bar style="background-color: #509DF7;color:#fff" :textColor="'#FFF'" @confirm="search"
					v-model="queryParam.Keyword" @clear="cancel" placeholder="请输入客户名称"
					@cancel="cancel"></uni-search-bar>
			</div>
		</div> -->

		<!-- 订单列表区域 -->
		<div class="list" style="padding-top: 70px;">
			<div>
				<div class="boxFormal" v-for="item in data" :key="item.Id" @click="deils(item)">
					<div class="companyName" style="font-size:14px">
						{{ item.cCusName }}
					</div>
					<div class="code">
						<div style="padding-right: 30px">订单号:{{ item.cSOCode }}</div>
						<div>编码:{{ item.cCusCode }}</div>
					</div>
				</div>
			</div>

			<div style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
			</div>

		</div>

		<!-- <Viewdetails ref="viewdetails" /> -->
		<!-- <Formdetails ref="formdetails" /> -->
		<!-- 自定义底部导航栏组件 -->
		<pyh-tab></pyh-tab>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		GetDataListByMySelfCustomer
	} from '@/api/interface.js'
	// import Formdetails from "./Formdetails.vue";
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	// import Viewdetails from "./Viewdetails";
	export default {
		components: {
			// Viewdetails,
			// Formdetails,
			HeaderTitle
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				loading: false,
				finished: false,
				pagination: {
					current: 1,
					pageSize: 10,
				},
				Total: 0,
				Keyword: "",
				data: [],
				queryParam: {
					condition: "cCusName",
					Keyword: ""
				}
			};
		},
		onShow() {
			this.data = []
			// 获取订单信息列表
			this.getDataList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			this.data = [];
			this.getDataList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.pagination.current++;
			this.getDataList();
		},
		computed: {
			...mapState(["UserInfo", "DeptId", "bgColor"]),
		},
		methods: {
			deils(item) {
				uni.navigateTo({
					url: "/pages/Transaction/Formdetails?Id=" + item.ID
				})
			},
			tableClick(Subitem) {
				this.$refs.viewdetails.openForm(Subitem);
			},
			paginationchange(a) {
				// a:当前选中页码
				this.pagination.current = a;
				this.getDataList();
			},
			btn(id) {
				Dialog.confirm({
						message: "确定要删除吗",
						confirmButtonColor: "#1989fa"
					})
					.then(() => {
						this.http
							.post(
								"/QuotationManagement/Quot_OfferSheetMain/DeleteDataOfAll",
								id
							)
							.then(resJson => {
								if (resJson.Success) {
									this.$toast("删除成功");
									this.getDataList();
								} else {
									this.$toast("删除失败");
								}
							});
					})
					.catch(() => {
						console.log(123);
					});
			},
			clear() {
				console.log(123);
				this.queryParam = {
					condition: "cCusName",
					keyword: ""
				};
				// 清空列表数据
				this.data = [];
				// 重新加载
				this.loading = true;
				// 数据没有加载完成
				this.finished = false;
				this.getDataList();
			},
			// 返回到上一页

			onClickLeft() {
				this.$router.go(-1);
			},
			onClickRight() {
				this.$refs.edit.openForm();
			},
			//弹出页面
			Edit(Id) {
				this.$refs.edit.openForm(Id);
			},
			// 搜索取消
			cancel() {
				this.status = "loading"
				this.queryParam.Keyword = ""
				this.search()
			},
			//搜索
			search(value) {
				this.queryParam.Keyword = value
				this.status = "loading"
				// 页数重置
				this.pagination.current = 1;
				// 清空列表数据
				this.data = [];
				// 重新加载
				// 重新获取订单信息列表数据
				this.getDataList();
			},

			// 获取订单列表数据
			getDataList() {
				uni.showLoading({
					title: '加载中'
				})
				this.loading = true
				GetDataListByMySelfCustomer({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "dDate",
						SortType: "desc",
						Search: this.queryParam
					})
					.then(resJson => {
						this.Total = resJson.Data.Total;
						if (resJson.Success) {
							uni.hideLoading()
							if (this.pagination.current == 1) {
								this.data = resJson.Data;
							} else {
								this.data = this.data.concat(resJson.Data);
							}
							if (this.data.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}
						}

					});
			}
		}
	};
</script>

<style scoped>
	.search-none {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 200px;
		text-align: center;
	}

	.code {
		display: flex;
		justify-content: flex-start;
		margin-left: 10px;
		color: #777;
	}

	.formalBox {
		/* height: calc(100vh - 150px); */
		/* padding-bottom: 50px; */
		box-sizing: border-box;
		overflow: auto;
	}

	.companyName {
		padding-top: 10px;
		margin-left: 10px;
		margin-bottom: 5px;
		color: #000000;
		font-weight: 600;
		font-size: 18px;
		line-height: 1.8;
	}

	.boxFormal {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		/* position: relative; */
		background-color: #fff;
		width: 95%;
		/* height: 80px; */
		padding-bottom: 10px;
		margin: 3px auto;
		margin-bottom: 10px;
	}

	/* table {
  border-right: 1px solid #804040;
  border-bottom: 1px solid #804040;
  border-collapse: collapse;
}

table td {
  border-left: 1px solid #804040;
  border-top: 1px solid #804040;
  padding: 3px;
}
.cCusOAddress {
  width: 300px;
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
} */
</style>